Completely useless presentation
2023-11-12
This is a testflight. In these slides, I will test some (nice) features of reveal.js for my personal use. The features come mostly from Quarto-Revealjs.
🐈🐈🐈
(continued from the previous slide)
p 태그와 ui, ol 태그의 글씨는 다를까?ul, ol)가 이 텍스트와 달라 보이나요? (다르지 않네요!)해장술은 * 숫자에 따라서 다르게 처리됩니다.
*: 이탤릭**: 굵게***: 굵게 + 이탤릭preamble에 디폴트 옵션으로도 넣을 수 있다.
개별 객체에 대해서도 설정 가능
리스트 항목에 적용된다.
사례를 보자.
역시 사례를 보자.
content before the pause
(. . .을 쓰면 뒤에 나올 내용을 멈출 수 있다.)
content after the pause
Left column
Right column
{.smaller}{.smaller}##...{ .smaller }
yaml에서 디폴트를 설정하거나 슬라이드 설정에서 {.scrollable}
\[ \begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned} \]
\[ \begin{bmatrix} 1 & x & 0 \\ 0 & 1 & -1 \end{bmatrix}\begin{bmatrix} 1 \\ y \\ 1 \end{bmatrix} =\begin{bmatrix} 1+xy \\ y-1 \end{bmatrix}. \]
인라인 수식은 잘 들어갑니꽈~ \(y_i = \alpha + \beta x_i\)는 회귀방정식~
{.smaller}Note
{.smaller}을 슬라이드 타이틀에 적용한 경우. 콜아웃 노트의 마크는 작아지지 않는다. 따라서 여기서처럼 css 스타일을 적용해 콜아웃 노트 폰트 크기를 조절할 수 있다.
\[ \begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned} \] \[ \begin{bmatrix} 1 & x & 0 \\ 0 & 1 & -1 \end{bmatrix}\begin{bmatrix} 1 \\ y \\ 1 \end{bmatrix} =\begin{bmatrix} 1+xy \\ y-1 \end{bmatrix}. \]
인라인 수식은 잘 들어갑니꽈~ \(y_i = \alpha + \beta x_i\)는 회귀방정식~
.qmd 파일과 같은 위치에 .css 파일을 두고, 문서 앞의 YAML에서 해당 파일을 로드하면 된다.format.scss를 보자.
@import url("https://cdn.jsdelivr.net/gh/wan2land/d2coding/d2coding-ligature-subset.css");
@import url("https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/static/woff2/SUIT.css");
@import url("https://cdn.jsdelivr.net/gh/sunn-us/SUITE/fonts/static/woff2/SUITE.css");
/*-- scss:rules --*/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
font-family: 'SUITE', sans-serif !important;
/* text-shadow: -1px -1px 0 rgba(0, 0, 0, .3); */
font-weight: 750;
}
.reveal section p {
font-family: 'SUIT', sans-serif !important;
font-size: 90%;
}
.reveal section pre code {
font-family: 'D2Coding', monospace !important;
font-size: 90%;
}
.reveal ul,
.reveal li,
.reveal ol {
font-family: 'SUIT', sans-serif !important;
font-size: 95%;
}
.reveal code{
font-family: 'D2Coding', monospace !important;
font-size: 95%;
}You can change the color of background (to aquamarine)!
This slide’s background image will be sized to 250px and repeated.
background-size="cover": 벽지를 슬라이드에 맞춘다. 그림은 임의로 확대된다.background-size="contain": 벽지를 슬라이드에 채워넣지만 원본 그림을 유지한다.(A slide with no title)
코드를 실행하기 위해서는 ’환경’을 쓰는 게 좋다.
VS Code Extension이 아직까지 conda 환경을 제대로 지원하지 않는다.
이제 가상 환경을 잘 지원한다!
.pixi > env > bin > python을 지정하면 된다. 🔗 참고페이지 렌더링이 필요하다면?
>quarto render로 프로젝트를 컴파일하자.이 슬라이드처럼 다크 테마를 쓸 경우 그림 표시에 문제가 있을 수 있다.
Testing Code I)Testing Code II)#| echo: true
#| layout: [-5, 60, -5]
#| fig-size: [10,10]
#| fig-cap: "A line plot on a polar axis"
#| cap-align: center
import numpy as np
import matplotlib.pyplot as plt
plt.style.use('dark_background')
r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={"projection": "polar"})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()plt.style.use('dark_background'): 다크 모드에 맞춘 스타일 설정#| echo: true
#| label: fig-polar-2
#| fig-cap: "A line plot on a polar axis wth customized style"
import numpy as np
import matplotlib.pyplot as plt
plt.style.use('seaborn-v0_8-white')
#plt.rcParams["figure.figsize"] = (6,6)
r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={"projection": "polar"})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()plt.style.use('seaborn-v0_8-white'): 적절한 백색 스타일슬라이드 내에서 ::: 블록 지정 후에 css를 적용할 수 있다.
위와 같이 적용하면 슬라이드 요소의 일부분에 css를 적용할 수 있다.
This slide’s background image fits the screen.
##)뒤에 style로 css 적용하자.”Note
단 이렇게 걸게 되면 이 슬라이드에서 보듯이 제목 등 슬라이드 포맷 전체가 css의 적용을 받게 된다.
이렇게 엠베딩이 가능하다. 🔗 참고
background-video로는 유튜브 영상을 넣을 수 없다.background-iframe으로 넣으면 된다. 단 유튜브의 경우 링크는 www.youtube.com/embed/(영상주소코드)로 넣어야 한다.&autoplay: 1이면 자동 재생&mute: 1이면 음소거&loop: 1이면 반복 재생. &playlist와 함께 써야 한다.yml 설정에서 preview-links: true를 설정해둔다.
[🔗](...){preview-link="true"} 와 같이 {} 안에서 개별적으로 설정해서 쓸 수도 있다.
target="_blank"를 붙이면 새 창에서 열린다.embed-resources: true 설정해야 퍼블리시에 문제가 없다.
.js 파일들이 함께 올라가야 웹에서 제대로 퍼블리시 된다. 처음만 올라가면 된다. 이후 동기화에서 이 파일들은 동기화되지 않는다.docs에 파일을 다 넣고 퍼블리시 하는 방식이다.docs에 넣고 퍼블리시 하는 방식을 권장한다.
 방식으로 설정이 쉽지 않다.layout="(...)"으로 하면 편리하다.format.scss에 아래와 같이 설정하면 된다.TEST FOR FOOTER!